<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>
 Overview
</title>
<link rel ="stylesheet" type="text/css" href="stylesheet.css" title="Style">
<script>
function asd() {
	
		parent.document.title="EO.js Overview";
	
}
</script>
</head>
<body bgcolor="white" onload="asd();">

<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> 	<font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top">
<em>
<b></b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<center>
	
	   <h2>EO.js</h2>
	
</center>

	


<h4>Summary</h4>
<p>
	
		No overview generated for 'EO.js'<BR/><BR/>
	
</p>

<hr>


    <table border="1" cellpadding="3" cellspacing="0" width="100%">
    <tr bgcolor="#CCCCFF" class="TableHeadingColor">
    <td colspan=2><font size="+2">
    
        <b>Class Summary</b>
    
    </font></td>
    </tr>
    
    <tr bgcolor="white" class="TableRowColor">
    <td width="15%"><b><a href="EO.html">EO</a></b></td>
    <td>&nbsp;</td>
    </tr>
    
    </table>
    <hr/> 


<!-- ========== METHOD SUMMARY =========== -->

<!-- ========== END METHOD SUMMARY =========== -->


        <pre class="sourceview"><span class="comment">/**
 * Default behaviour of an EO. Every type of EO inherits from this class.
 * <span class="attrib">@author</span> Roosevelt de Lima Sardinha
 * <span class="attrib">@param</span> {String} id The unique identifier of an EO.
 * <span class="attrib">@param</span> {Object} The object containing the properties to be initially set to the EO.
 * <span class="attrib">@constructor</span>
 */</span>
<span class="reserved">function</span> EO(id, properties){	
	<span class="comment">/**
	 * The object containing the properties to be initially set to the EO. 
	 * <span class="attrib">@type</span> {Object}
	 */</span>
	<span class="reserved">this</span>.properties = properties;
	
	<span class="comment">/**
	 * The property box where the EO show its properties to be changed by the user.
	 * <span class="attrib">@type</span> {Object}
	 */</span>
	<span class="reserved">this</span>.propertyBox = <span class="reserved">this</span>.properties.propertyBox;
	
	<span class="comment">/**
	 * The instruction box where help to the user of this EO appears.
	 * <span class="attrib">@type</span> {Object}
	 */</span>
	<span class="reserved">this</span>.instructionBox = <span class="reserved">this</span>.properties.instructionBox;
	
	<span class="comment">/**
	 * The EOM that manages this EO.
	 * <span class="attrib">@type</span> {Object}
	 */</span>
	<span class="reserved">this</span>.EOM = <span class="reserved">this</span>.properties.EOM;
	
	<span class="comment">/**
	 * The unique id of this EO.
	 * <span class="attrib">@type</span> {String}
	 */</span>
	<span class="reserved">this</span>.id = id;
	
	<span class="comment">/**
	 * Keeps the status of the selection of the EO. True if it's selected, false if not.
	 * <span class="attrib">@type</span> {Boolean}
	 */</span>
	<span class="reserved">this</span>.selected = false;
	
	<span class="comment">// Events</span>
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when a property is set.
	 * <span class="attrib">@param</span> {Object} EO The EO that the property is being set.
	 */</span>
	<span class="reserved">this</span>.onSetProperty = <span class="reserved">function</span>(EO){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when the EO is selected
	 * <span class="attrib">@param</span> {Object} EO This EO when selected.
	 */</span>
	<span class="reserved">this</span>.onSelect = <span class="reserved">function</span>(EO){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when the EO is unselected.
	 * <span class="attrib">@param</span> {Object} EO This EO when unselected.
	 */</span>
	<span class="reserved">this</span>.onUnselect = <span class="reserved">function</span>(EO){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when you drag an EO.
	 * <span class="attrib">@param</span> {Int} x The left coordinate of the EO being dragged. Relative to the edition area.
	 * <span class="attrib">@param</span> {Int} y The top coordinate of the EO being dragged. Relative to the edition area.
	 * <span class="attrib">@param</span> {Object} EO This EO while being dragged.
	 */</span>
	<span class="reserved">this</span>.onDrag = <span class="reserved">function</span>(x, y, EO){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when you drop an EO.
	 * <span class="attrib">@param</span> {Int} x The left coordinate of the EO when you drop it. Relative to the edition area.
	 * <span class="attrib">@param</span> {Int} y The top coordinate of the EO when you drop it. Relative to the edition area.
	 * <span class="attrib">@param</span> {Object} EO The EO when dropped. 
	 */</span>
	<span class="reserved">this</span>.onDrop = <span class="reserved">function</span>(x, y, EO){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when you remove this EO.
	 */</span>
	<span class="reserved">this</span>.onRemove = <span class="reserved">function</span>(){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when the cursor is over the EO in the edition area.
	 * <span class="attrib">@param</span> {Event} event The mouse event of the DOM node.
	 * <span class="attrib">@param</span> {Object} EO This EO when the mouse is over it. 
	 */</span>
	<span class="reserved">this</span>.onMouseOver = <span class="reserved">function</span>(event, EO){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when the cursor leaves the EO in the edition area. 
	 * <span class="attrib">@param</span> {Event} event The mouse event of the DOM Node. 
	 * <span class="attrib">@param</span> {Object} EO This EO when the mouse leaves it.
	 */</span>
	<span class="reserved">this</span>.onMouseOut = <span class="reserved">function</span>(event, EO){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when you press the button of the mouse over the EO.
	 * <span class="attrib">@param</span> {Event} event The mouse event of the DOM Node.
	 * <span class="attrib">@param</span> {Object} EO This EO when you press the button of the mouse over the EO. 
	 */</span>
	<span class="reserved">this</span>.onMouseDown = <span class="reserved">function</span>(event, EO){};
	
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;br/&gt;
	 * Called when you double click the EO.
	 * <span class="attrib">@param</span> {Event} event The mouse event of the DOM Node.
	 * <span class="attrib">@param</span> {Object} EO This you when you double click it.
	 */</span>
	<span class="reserved">this</span>.onDblClick = <span class="reserved">function</span>(event, EO){};
	
	<span class="comment">/**
	 * Called when the EO show its properties in the property box.
	 * <span class="attrib">@param</span> {Object} EO The EO when showing the properties 
	 */</span>
	<span class="reserved">this</span>.onShowProperties = <span class="reserved">function</span>(EO){};
	
	<span class="comment">/**
	 * Called when the EO show some help in the instruction box.
	 * <span class="attrib">@param</span> {Object} EO The EO when it shows some help in the instruction box.
	 */</span>
	<span class="reserved">this</span>.onShowInstructions = <span class="reserved">function</span>(EO){};
	
	
	<span class="comment">// The same method in the EO implementation</span>
	<span class="comment">// Note: when a method of the same name exists here, the method of the user is renamed to user_METHODNAME(); First the framework calls the method in this class,</span>
	<span class="comment">// so be sure to call the user method.</span>
	
	<span class="comment">/**
	 * Changes a property of the EO to some value
	 * <span class="attrib">@param</span> {String} propertyName The name of the property to be changed.
	 * <span class="attrib">@param</span> {Any} value The value to be set to the property.
	 */</span>	
	<span class="reserved">this</span>.setProperty = <span class="reserved">function</span>(property, value){
		switch(property){
            case <span class="literal">'left'</span>:
                <span class="reserved">this</span>.setLeft(parseInt(value));
                break;
            case <span class="literal">'top'</span>:
                <span class="reserved">this</span>.setTop(parseInt(value));
                break;
			case <span class="literal">'propertyBox'</span>:
				<span class="reserved">this</span>.propertyBox = <span class="reserved">this</span>.EOM.editionArea.workspace.getPropertyBoxById(value);
				break;
			case <span class="literal">'instructionBox'</span>:
				<span class="reserved">this</span>.instructionBox = <span class="reserved">this</span>.EOM.editionArea.workspace.getInstructionBoxById(value);
				break;
			default:
				break;
		}
			
		<span class="reserved">this</span>.user_setProperty(property,value);
		<span class="reserved">this</span>.onSetProperty(<span class="reserved">this</span>);		
	} 
	
	<span class="comment">/**
	 * Returns the value of a property.
	 * <span class="attrib">@param</span> {String} property The property to return the corresponding value.
	 * <span class="attrib">@return</span> The value of the property. The type depends on the property.
	 * <span class="attrib">@type</span> {Any}
	 */</span>
	<span class="reserved">this</span>.getProperty = <span class="reserved">function</span>(property){
  		switch (property) {
			case <span class="literal">'left'</span>:
				<span class="reserved">return</span> <span class="reserved">this</span>.getLeft();
				break;
			case <span class="literal">'top'</span>:
				<span class="reserved">return</span> <span class="reserved">this</span>.getTop();
				break;
			default:
				break;
		}
		var value = <span class="reserved">this</span>.user_getProperty(property);
		<span class="reserved">return</span> value;
	}
	
	<span class="comment">/**
	 * Returns the properties of an EO in a JSON.
	 * <span class="attrib">@return</span> A JSON with all the EO properties
	 * <span class="attrib">@type</span> {Object}
	 */</span>
	<span class="reserved">this</span>.JSON = <span class="reserved">function</span>(){
		var json =  <span class="reserved">this</span>.user_JSON();
		json.left = <span class="reserved">this</span>.getProperty(<span class="literal">'left'</span>);
		json.top = <span class="reserved">this</span>.getProperty(<span class="literal">'top'</span>);
		<span class="reserved">if</span> (<span class="reserved">this</span>.propertyBox) {
			json.propertyBox = <span class="reserved">this</span>.propertyBox.id;
		}
		<span class="reserved">if</span> (<span class="reserved">this</span>.instructionBox) {
			json.instructionBox = <span class="reserved">this</span>.instructionBox.id;
		}
        <span class="reserved">return</span> json;
	}
	
    <span class="comment">// It's necessary to set the cancel property of the editionArea correctly to avoid problems with selection in IE.</span>
    <span class="comment">// If you don't do this, probably when you drag something you're going to select another thing at the same time.</span>
	<span class="reserved">this</span>.EOM.addToEditionAreaCancel(<span class="literal">'div[id='</span> + <span class="reserved">this</span>.id +<span class="literal">']'</span>);
		
	<span class="comment">/**
	 * &lt;b&gt;Event&lt;/b&gt;&lt;/br&gt;
	 * Defines what to do when the EO is appended.
	 */</span>	
	<span class="reserved">this</span>.onAppend = <span class="reserved">function</span>(){
		<span class="reserved">if</span> (<span class="reserved">this</span>.propertyBox) {
			<span class="reserved">this</span>.propertyBox.removeAllTabs();
		}	
		<span class="reserved">this</span>.EOM.selectEO(<span class="reserved">this</span>.id);
		<span class="reserved">if</span> (<span class="reserved">this</span>.user_onAppend) {
			<span class="reserved">this</span>.user_onAppend();
		}
	} 
	
	<span class="comment">/**
	 * Sets the property box where this EO is going to show its properties.
	 * <span class="attrib">@param</span> {String} propertyBoxId The id of the property box to set to this EO.
	 */</span>
	<span class="reserved">this</span>.setPropertyBox = <span class="reserved">function</span>(propertyBoxId){
		<span class="reserved">this</span>.propertyBox = <span class="reserved">this</span>.EOM.editionArea.workspace.getPropertyBoxById(propertyBoxId);
		<span class="reserved">this</span>.onSetProperty(EO);
	}
	
	<span class="comment">/**
	 * Sets the instruction box where the EO is going to show help to the user.
	 * <span class="attrib">@param</span> {String} instructionBoxId The id of the instruction box to set to this EO.
	 */</span>
	<span class="reserved">this</span>.setInstructionBox = <span class="reserved">function</span>(instructionBoxId){
		<span class="reserved">this</span>.instructionBox = <span class="reserved">this</span>.EOM.editionArea.workspace.getInstructionBoxById(instructionBoxId);
		<span class="reserved">this</span>.onSetProperty(EO);
	}	
	
	<span class="comment">/**
	 * Gets an HTML Object corresponding to some DOM node of the EO, based on the internal name of the object in this class. 
	 * <span class="attrib">@param</span> {String} objectName The name of the object you need to be returned. Declared in the tool.js
	 * <span class="attrib">@return</span> The HTML Object
	 * <span class="attrib">@type</span> {DOM}
	 */</span>
    <span class="reserved">this</span>.getHTMLObject = <span class="reserved">function</span>(objectName){
        <span class="comment">// Returns an HTML object based on the internal name of the object in this class.</span>
        <span class="reserved">return</span> <span class="reserved">this</span>[objectName];
    }
	
	<span class="comment">/**
	 * Sets the left coordinate of the EO.
	 * <span class="attrib">@param</span> {Int} left The left coordinate relative to the edition area to be set.
	 */</span>
    <span class="reserved">this</span>.setLeft = <span class="reserved">function</span>(left){
        <span class="comment">// Sets the left property of the div that contains the EO.</span>
        var divEO = document.getElementById(<span class="reserved">this</span>.id);
        var editionAreaWidth = <span class="reserved">this</span>.EOM.editionArea.width;
        var divEORight = left + divEO.offsetWidth;
        var diff = editionAreaWidth - divEORight;
        
        <span class="reserved">if</span> (left &lt; 0) {
            divEO.style.left = <span class="literal">'0px'</span>;
        }
        <span class="reserved">else</span> {
            <span class="reserved">if</span> (diff &gt;= 0) {
                divEO.style.left = left + <span class="literal">'px'</span>;
            }
            <span class="reserved">else</span> {
                divEO.style.left = left + diff + <span class="literal">'px'</span>;
            }
        }
		<span class="reserved">this</span>.onSetProperty(EO);
    }

	<span class="comment">/**
	 * Sets the top coordinate of the EO.
	 * <span class="attrib">@param</span> {Int} top The top coordinate relative to the edition area to be set.
	 */</span>    
    <span class="reserved">this</span>.setTop = <span class="reserved">function</span>(top){
        <span class="comment">// Sets the left property of the div that contains the EO.</span>
        var divEO = document.getElementById(<span class="reserved">this</span>.id);
        var editionAreaHeight = <span class="reserved">this</span>.EOM.editionArea.height;
        var divEOBottom = top + divEO.offsetHeight;
        var diff = editionAreaHeight - divEOBottom;
        
        <span class="reserved">if</span> (top &lt; 0) {
            divEO.style.top = <span class="literal">'0px'</span>;
        }
        <span class="reserved">else</span> {
            <span class="reserved">if</span> (diff &gt;= 0) {
                divEO.style.top = top + <span class="literal">'px'</span>;
            }
            <span class="reserved">else</span> {
                divEO.style.top = top + diff + <span class="literal">'px'</span>;
            }
        }
		<span class="reserved">this</span>.onSetProperty(EO);
    }
	
	<span class="comment">/**
	 * Sets the width of the EO.
	 * <span class="attrib">@param</span> {Int} width The width to be set.
	 */</span>
    <span class="reserved">this</span>.setWidth = <span class="reserved">function</span>(width){
        var divEO = document.getElementById(<span class="reserved">this</span>.id);
        
        divEO.style.width = width + <span class="literal">'px'</span>;
		<span class="reserved">this</span>.onSetProperty(EO);
    }
    
	<span class="comment">/**
	 * Returns the left coordinate of the EO.
	 * <span class="attrib">@return</span> The left coordinate
	 * <span class="attrib">@type</span> {Int}
	 */</span>
    <span class="reserved">this</span>.getLeft = <span class="reserved">function</span>(){
        var divEO = document.getElementById(<span class="reserved">this</span>.id);
        
        <span class="reserved">return</span> divEO.offsetLeft;
    }
    
	<span class="comment">/**
	 * Returns the top coordinate of the EO.
	 * <span class="attrib">@return</span> The top coordinate.
	 * <span class="attrib">@type</span> {Int}
	 */</span>    
	 <span class="reserved">this</span>.getTop = <span class="reserved">function</span>(){
        var divEO = document.getElementById(<span class="reserved">this</span>.id);
        
        <span class="reserved">return</span> divEO.offsetTop;
    }
    
	<span class="comment">/**
	 * Returns the width of the EO.
	 * <span class="attrib">@return</span> The EO width
	 * <span class="attrib">@type</span> {Int}
	 */</span>
    <span class="reserved">this</span>.getWidth = <span class="reserved">function</span>(){
        var divEO = document.getElementById(<span class="reserved">this</span>.id);
        
        <span class="reserved">return</span> divEO.offsetWidth;
    }
    
	<span class="comment">/**
	 * Returns the height of the EO.
	 * <span class="attrib">@return</span> The EO height
	 * <span class="attrib">@type</span> {Int}
	 */</span>
    <span class="reserved">this</span>.getHeight = <span class="reserved">function</span>(){
        var divEO = document.getElementById(<span class="reserved">this</span>.id);
        
        <span class="reserved">return</span> divEO.offsetHeight;
    }
	
	<span class="comment">/**
	 * Sets the snapTo of a particular EO. The movement is going to be restricted to moving in the x or y axis by multiples in pixels of this snapTo. 
	 * <span class="attrib">@param</span> {Int} x The step in the x axis of the snapTo.
	 * <span class="attrib">@param</span> {Int} y The step in the y axis of the snapTo.
	 */</span>
	<span class="reserved">this</span>.setSnapTo = <span class="reserved">function</span>(x,y){
		$( <span class="literal">"#"</span> + <span class="reserved">this</span>.id ).draggable(<span class="literal">'option'</span>, <span class="literal">'grid'</span>, [ x,y ]);
		var myX = <span class="reserved">this</span>.getLeft();
		var myY = <span class="reserved">this</span>.getTop();
		
		var restX = myX % x;
		var restY= myY % y;
		
		<span class="reserved">if</span> (myX &gt;= (x/2)){
			<span class="reserved">this</span>.setLeft(myX + (x - restX));
		}
		
		<span class="reserved">if</span> (myX &lt; (x/2)){
			<span class="reserved">this</span>.setLeft(myX - restX);
		}
		
		<span class="reserved">if</span> (myY &gt;= (y/2)){
			<span class="reserved">this</span>.setTop(myY + (y - restY));
		}
		
		<span class="reserved">if</span> (myY &lt; (y/2)){
			<span class="reserved">this</span>.setTop(myY - restY);
		}
		<span class="reserved">this</span>.onSetProperty(EO);
	}
}
</pre>
	<hr>



<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top"><em>
<b></b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<font size="-1">

</font>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Mon Feb 21 18:12:28 2011</div>
</body>
</html>
